import React, { useState ,useEffect,useImperativeHandle, forwardRef} from 'react'
import { Button, Modal, Checkbox, Input, Radio } from 'antd'
import './gmappoval.css'
import apis from '@/apis/AboutQuota'
import { http } from '@/lib'
import Search from 'antd/lib/input/Search'

 const  GmApproval = (props) =>{
   const [visible, setVisible] = useState(false)
   const [index, setIndex] = useState(-1)
   const [arrlist, setarrlist] = useState([])
   const [id, setId] = useState([])

    useEffect(() => {
       getpersonList()
    }, [index])

   const getpersonList = (realName?:any) =>{
    if(sessionStorage.getItem('role')&&index!=-1){
     let data = sessionStorage.getItem('role')
    console.log('====================');
     let newData = JSON.parse(data)
      const datas  ={
        ids:newData[index]?.roles,
        realName
      }
      http.post(apis.getApprovalProcessOrg,datas).then(resp=>{
        console.log(resp);
        setarrlist(resp.data)
      })
     
     }
    }
   useImperativeHandle(props.cRef, () => ({
    // handleOk 就是暴露给父组件的方法
    handelCeck: (index) => {
      console.log(index);
      setId([])
      setIndex(index)
      setVisible(true)
    }
 }));
 const handleOk = () =>{
  //  let data = arrlist.filter(item=>item.id==id)
   let data = arrlist.filter(item=>id.indexOf(item.id) > -1)

    props.handelcilck(data)
    setVisible(false)
  }
   const handleCancel = () =>{
    setVisible(false)
   }
   const onChange = e =>{
    console.log(e);
    // setId(e.target.value)
    setId(e)
   }
    return(
        <div>
        <Modal
          title="选择审批人"
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
        <Checkbox.Group style={{ width: '100%' }} value={id} onChange={onChange}>
          <Search
            placeholder="请输入"
            enterButton="搜索"
            onSearch={value => getpersonList(value)}
            />
          <div className="sollor"> 
              {
                  arrlist.map((item:any,index:any)=>(
                  <div  className="weaper-gm" key={item.id}>
                      <Checkbox value={item.id} >
                      <div className="weaper-name">
                          <div className="circle-gm">{item.realName}</div>
                          <div className="mar-left">{item.realName}</div>
                      </div>
                      </Checkbox>
                  </div>
                  ))
              }
           </div>
          </Checkbox.Group>
          {/* <Radio.Group style={{ width: '100%' }} onChange={onChange}>
               <Search
                placeholder="请输入"
                enterButton="搜索"
                onSearch={value => getpersonList(value)}
               />
            <div className="sollor"> 
               {
                   arrlist.map((item:any,index:any)=>(
                    <div  className="weaper-gm" key={item.id}>
                        <Radio value={item.id} >
                        <div className="weaper-name">
                           <div className="circle-gm">{item.realName}</div>
                            <div className="mar-left">{item.realName}</div>
                        </div>
                        </Radio>
                    </div>
                   ))
               }
           </div>
         </Radio.Group> */}
        </Modal>
      </div>
    )


 }

 export default GmApproval